<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="../build/react/umd/react.development.js"></script>
    <script src="../build/react-dom/umd/react-dom.development.js"></script>
    <script src="../build/babel/babel.min.js"></script>
  </head>

  <body>
    <div id="root"></div>
    <script type="text/babel">
      class LikeButton extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            liked: false
          };
          this.handleClick = this.handleClick.bind(this);
        }

        handleClick(event) {
          this.setState({ liked: !this.state.liked });
        }

        render() {
          var text = this.state.liked ? "like" : "haven't liked";
          return (
            <p style={{ cursor: "pointer" }} onClick={this.handleClick}>
              You <span style={{ color: "red" }}>{text}</span> this. Click to
              toggle.
            </p>
          );
        }
      }

      class KKA extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            count: false
          };
        }

        incrementCount = () => {
          // 注意：这样 *不会* 像预期的那样工作。
          this.setState({ count: this.state.count + 1 });
        };

        handleSomething = () => {
          // 假设 `this.state.count` 从 0 开始。
          this.incrementCount();
          this.incrementCount();
          this.incrementCount();
          // 当 React 重新渲染该组件时，`this.state.count` 会变为 1，而不是你期望的 3。

          // 这是因为上面的 `incrementCount()` 函数是从 `this.state.count` 中读取数据的，
          // 但是 React 不会更新 `this.state.count`，直到该组件被重新渲染。
          // 所以最终 `incrementCount()` 每次读取 `this.state.count` 的值都是 0，并将它设为 1。

          // 问题的修复参见下面的说明。
        };

        render() {
          return (
            <p>
              Keep 0：{this.state.count}
              <button onClick={this.handleSomething}>click +3</button>
            </p>
          );
        }
      }

      class KKB extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            count: false
          };
        }

        incrementCount = () => {
          this.setState(state => {
            // 重要：在更新的时候读取 `state`，而不是 `this.state`。
            return { count: state.count + 1 };
          });
        };

        handleSomething = () => {
          // 假设 `this.state.count` 从 0 开始。
          this.incrementCount();
          this.incrementCount();
          this.incrementCount();

          // 如果你现在在这里读取 `this.state.count`，它还是会为 0。
          // 但是，当 React 重新渲染该组件时，它会变为 3。
        };

        render() {
          return (
            <p>
              Now 3：{this.state.count}
              <button onClick={this.handleSomething}>click +3</button>
            </p>
          );
        }
      }

      ReactDOM.render(
        <div>
          <LikeButton />
          <KKA />
          <KKB />
        </div>,
        document.getElementById("root")
      );
    </script>
  </body>
</html>
